<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML演示文稿</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 侧边导航栏 -->
    <div class="sidebar" id="sidebar">
        <div class="sidebar-toggle" id="sidebarToggle">≡</div>
        <div class="sidebar-content">
            <h2>目录</h2>
            <ul id="slideNav">
                <!-- 导航项会通过JavaScript动态生成 -->
            </ul>
        </div>
    </div>

    <!-- 幻灯片容器 -->
    <div class="slides-container">
        <!-- 幻灯片1 -->
        <section class="slide" id="slide1">
            <h1>演示文稿标题</h1>
            <h3>副标题内容</h3>
        </section>

        <!-- 幻灯片2 -->
        <section class="slide" id="slide2">
            <h2>第二页</h2>
            <ul>
                <li>要点1</li>
                <li>要点2</li>
                <li>要点3</li>
            </ul>
        </section>

        <!-- 幻灯片3 -->
        <section class="slide" id="slide3">
            <h2>第三页</h2>
            <p>这是一些文本内容。您可以在此处添加详细说明。</p>
            <div class="image-container">
                <img src="https://via.placeholder.com/400x300" alt="示例图片">
            </div>
        </section>

        <!-- 更多幻灯片... -->
        <section class="slide" id="slide4">
            <h2>结束页</h2>
            <p>感谢观看！</p>
        </section>
    </div>

    <!-- 导航控件 -->
    <div class="controls">
        <button id="prevBtn">上一页</button>
        <span id="slideCounter">1 / 4</span>
        <button id="nextBtn">下一页</button>
    </div>

    <script src="script.js"></script>
</body>
</html>